<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>鸿蒙应用连接MQTT文档</title>
    <link rel="stylesheet" href="lightbox.css">
    <style>
        body {
            font-family: Arial, sans-serif;
            line-height: 1.6;
            margin: 0;
            padding: 20px;
            color: #333;
            max-width: 1200px;
            margin: 0 auto;
        }
        h1, h2, h3 {
            color: #0066cc;
        }
        h1 {
            border-bottom: 2px solid #0066cc;
            padding-bottom: 10px;
        }
        h2 {
            margin-top: 30px;
            border-left: 4px solid #0066cc;
            padding-left: 10px;
        }
        code {
            background-color: #f5f5f5;
            padding: 2px 5px;
            border-radius: 3px;
            font-family: Consolas, monospace;
        }
        pre {
            background-color: #f5f5f5;
            padding: 15px;
            border-radius: 5px;
            overflow-x: auto;
        }
        .note {
            background-color: #e7f4ff;
            border-left: 4px solid #0066cc;
            padding: 15px;
            margin: 20px 0;
        }
        .warning {
            background-color: #fff3e0;
            border-left: 4px solid #ff9800;
            padding: 15px;
            margin: 20px 0;
        }
        img {
            max-width: 90%;
            height: auto;
            display: block;
            margin: 20px auto;
            border: 1px solid #ddd;
            box-shadow: 0 0 10px rgba(0,0,0,0.1);
            border-radius: 4px;
            object-fit: contain;
            image-rendering: -webkit-optimize-contrast;
            image-rendering: crisp-edges;
            transform: translateZ(0);
            backface-visibility: hidden;
            cursor: pointer;
            transition: transform 0.3s ease;
        }
        
        img:hover {
            transform: scale(1.01);
        }
        /* 导航样式 */
        .nav-container {
            background-color: #f8f8f8;
            padding: 10px;
            margin-bottom: 20px;
            border-radius: 4px;
        }
        .nav-container a {
            display: inline-block;
            margin-right: 15px;
            text-decoration: none;
            color: #0066cc;
            padding: 5px 10px;
            border-radius: 4px;
        }
        .nav-container a:hover {
            background-color: #e0e0e0;
        }
        .nav-container a.active {
            background-color: #0066cc;
            color: white;
        }
        /* 页脚样式 */
        footer {
            margin-top: 30px;
            border-top: 1px solid #ddd;
            padding-top: 15px;
            text-align: center;
            font-size: 0.9em;
            color: #666;
        }
        ol li {
            margin-bottom: 15px;
        }
    </style>
</head>
<body>
    <!-- 导航栏 -->
    <div class="nav-container">
        <a href="../首页.html">首页</a>
        <a href="一、华为云设备接入服务IoTDA.html">1. 华为云设备接入服务IoTDA</a>
        <a href="二、真实设备连接.html">2. 真实设备连接</a>
        <a href="三、模拟设备连接.html">3. 模拟设备连接</a>
        <a href="四、模拟应用连接.html">4. 模拟应用连接</a>
        <a href="五、鸿蒙应用连接.html" class="active">5. 鸿蒙应用连接</a>
    </div>
    
    <h1>五、鸿蒙应用连接</h1>
    
    <div class="note">
        <p>鸿蒙官方并不提供MQTT的任何方法，因此我们需要使用社区的开源MQTT代码</p>
    </div>
    
    <h2>步骤一：创建一个HarmonyOS工程并且下载MQTT包</h2>
    <p>在终端中执行：</p>
    <pre><code>ohpm install @ohos/mqtt</code></pre>
    <img src="../图片/图片5/图片1.png" alt="安装MQTT包截图">
    
    <h2>步骤二：新建一个ets文件并且导入实例，完成初始化</h2>
    <p>这个代码有现成的，有需要的可以自行下载在同目录下的mqtt.ets文件，详细代码都有注释这里就不一一解释代码了，只要讲配置信息：</p>
    <p>找到类MQTTClient下的代码：</p>
    <pre><code>url:
ClientID:
Username:
Password:</code></pre>
    <p>上面四个信息是需要一开始就写死的，分别对应我们前一章模拟连接中的信息如下：</p>
    <p>注意这里的url是服务器地址加上端口如：</p>
    <pre><code>Mqtts://faad01·····myhuaweicloud.com:8883</code></pre>
    <img src="../图片/图片5/图片2.png" alt="MQTT配置示例">
    
    <p>其他信息正常填上就行了，时间戳需要使用</p>
    <pre><code>*服务器地址 mqtts://v fdad01e5d8.st1.iotda-app.cn-north-4.myhuaweicloud.con
*端口 8883
v Client ID
username C日用户名 accessKey=7ORJOI54|timestamp=1746707874252|instanceld=e6934a85-58
密码 .........</code></pre>
    <img src="../图片/图片5/图片3.png" alt="MQTT详细配置">
    
    <p>对于topic和qos是在需要时实例化这个类提供的</p>
    
    <h2>步骤四：实例化类并且设置topic</h2>
    <p>在同目录下的MqttTestPage.ets文件下有一个我之前用于测试mqtt的代码，大家可自行查阅</p>
    <img src="../图片/图片5/图片4.png" alt="MqttTestPage示例">
    
    <p>创建mqtt客户端类过程为：</p>
    <ol>
        <li>定义topic和qos并且实例化MQTTClient类（因为使用的是开源社区的代码，我没有试过一个页面创建多个实例）这里topic请自行查看华为云topic设置</li>
        <img src="../图片/图片5/图片5.png" alt="实例化MQTTClient">
        
        <li>开启mqtt客户端监听，当收到来自mqtt的消息时，进行对应的处理</li>
        <img src="../图片/图片5/图片6.png" alt="MQTT监听设置">
        
        <li>关闭时销毁服务 MQTTClient类中提供了销毁的代码，有需要的可自行使用，不过这个销毁是只整个MQTT客户端都销毁，并不是销毁其中一个页面中创建的实例。</li>
        <img src="../图片/图片5/图片7.png" alt="MQTT销毁方法">
    </ol>
    
    <div class="warning">
        <p>PS:说实话这个MQTT社区代码并不好用，但是官方不提供方法，只能用这个了使用时可能会出现各种问题，建议先检查是否能够连接上服务器，有关信息可以在日志中查看，能发现很多问题。</p>
        
        <p>其次就是华为云loTDA的MQTT要求较高的安全性，配置过于麻烦而且可修改性低，所以我们自己写实验或者其他项目时并不是很建议使用这个（但是课程要求要使用这个），如果有需要mqtt服务的可以取试用阿里云MQTT服务器，开放性高且配置方便，根据需要自己设置topic和内容，只需要解析json就可以了，当然有能力的也可以自行配置EMQX集群上手容易且设置方便。</p>
    </div>
    
    <!-- 页脚导航 -->
    <footer>
        <p>
            <a href="四、模拟应用连接.html">上一篇: 模拟应用连接</a> | 
            <a href="一、华为云设备接入服务IoTDA.html">返回首页</a>
        </p>
    </footer>
    
    <!-- 引入灯箱脚本 -->
    <script src="lightbox.js"></script>
</body>
</html>